﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <!--ie模拟渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>Test</title>

    <style>
        img {
            width: 200px;
            height: 200px;
        }
    </style>
    <!--引入脚本解决兼容性(hack技术，必须放入head中)-->
    <!--[if lt ie 9]>
        <script src="~/Content/Scripts/html5_css3/html5shiv.min.js"></script>
        <script src="~/Content/Scripts/html5_css3/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<img  src="/Content/Images/2.jpg"/>

</body>
</html>

<script src="~/Content/Scripts/jquery-2.0.3.min.js"></script>
<script src="~/Content/Scripts/exif.js"></script>
<script>

    $(function() {
        $("img").each(function () {
            var item = this;
            //图片方向角 added by lzk
            var Orientation = null;
            var blod = null;//图片数据
            


            var oReq = new XMLHttpRequest();
            oReq.open("GET", item.src, true);
            oReq.responseType = "blob";
            oReq.onreadystatechange = function () {
                if (oReq.readyState == oReq.DONE) {
                    blob = oReq.response;

                    //分析图片数据
                    EXIF.getData(blob, function () {
                        // alert(EXIF.pretty(this));
                        EXIF.getAllTags(this);
                        //alert(EXIF.getTag(this, 'Orientation'));
                        Orientation = EXIF.getTag(this, 'Orientation');
                        //return;
                    });
                    var oReader = new FileReader();
                    oReader.onload = function (e) {
                        //var blob = URL.createObjectURL(file);  
                        //_compress(blob, file, basePath);  
                        var image = new Image();
                        image.src = e.target.result;
                        image.onload = function () {
                            var expectWidth = this.naturalWidth;
                            var expectHeight = this.naturalHeight;

                            if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
                                expectWidth = 800;
                                expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
                            } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
                                expectHeight = 1200;
                                expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
                            }
                            var canvas = document.createElement("canvas");
                            var ctx = canvas.getContext("2d");
                            canvas.width = expectWidth;
                            canvas.height = expectHeight;
                            ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
                            var base64 = null;
                            //修复ios  
                            if (navigator.userAgent.match(/iphone/i)) {
                                console.log('iphone');
                                //alert(expectWidth + ',' + expectHeight);  
                                //如果方向角不为1，都需要进行旋转 added by lzk  
                                if (Orientation != "" && Orientation != 1) {
                                    switch (Orientation) {
                                        case 6://需要顺时针（向左）90度旋转  
                                            alert('需要顺时针（向左）90度旋转');
                                            rotateImg(this, 'left', canvas);
                                            break;
                                        case 8://需要逆时针（向右）90度旋转  
                                            alert('需要顺时针（向右）90度旋转');
                                            rotateImg(this, 'right', canvas);
                                            break;
                                        case 3://需要180度旋转  
                                            alert('需要180度旋转');
                                            rotateImg(this, 'right', canvas);//转两次  
                                            rotateImg(this, 'right', canvas);
                                            break;
                                    }
                                }

                                /*var mpImg = new MegaPixImage(image); 
                                mpImg.render(canvas, { 
                                    maxWidth: 800, 
                                    maxHeight: 1200, 
                                    quality: 0.8, 
                                    orientation: 8 
                                });*/
                                base64 = canvas.toDataURL("image/jpeg", 0.8);
                            } else if (navigator.userAgent.match(/Android/i)) {// 修复android  
                                var encoder = new JPEGEncoder();
                                base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);
                            } else {
                                //alert(Orientation);  
                                if (Orientation != "" && Orientation != 1) {
                                    //alert('旋转处理');  
                                    switch (Orientation) {
                                        case 6://需要顺时针（向左）90度旋转  
                                            alert('需要顺时针（向左）90度旋转');
                                            rotateImg(this, 'left', canvas);
                                            break;
                                        case 8://需要逆时针（向右）90度旋转  
                                            alert('需要顺时针（向右）90度旋转');
                                            rotateImg(this, 'right', canvas);
                                            break;
                                        case 3://需要180度旋转  
                                            alert('需要180度旋转');
                                            rotateImg(this, 'right', canvas);//转两次  
                                            rotateImg(this, 'right', canvas);
                                            break;
                                    }
                                }

                                base64 = canvas.toDataURL("image/jpeg", 0.8);
                            }
                            //uploadImage(base64);  
                            $(item).attr("src", base64);
                        };
                    };
                    oReader.readAsDataURL(blob);



                }
            }
            oReq.send();
            

        });



    });


    //对图片旋转处理 added by lzk
    function rotateImg(img, direction, canvas) {
        //alert(img);
        //最小与最大旋转方向，图片旋转4次后回到原方向
        var min_step = 0;
        var max_step = 3;
        //var img = document.getElementById(pid);
        if (img == null) return;
        //img的高度和宽度不能在img元素隐藏后获取，否则会出错
        var height = img.height;
        var width = img.width;
        //var step = img.getAttribute('step');
        var step = 2;
        if (step == null) {
            step = min_step;
        }
        if (direction == 'right') {
            step++;
            //旋转到原位置，即超过最大值
            step > max_step && (step = min_step);
        } else {
            step--;
            step < min_step && (step = max_step);
        }
        //img.setAttribute('step', step);
        /*var canvas = document.getElementById('pic_' + pid);
        if (canvas == null) {
            img.style.display = 'none';
            canvas = document.createElement('canvas');
            canvas.setAttribute('id', 'pic_' + pid);
            img.parentNode.appendChild(canvas);
        }  */
        //旋转角度以弧度值为参数
        var degree = step * 90 * Math.PI / 180;
        var ctx = canvas.getContext('2d');
        switch (step) {
        case 0:
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, 0, 0);
            break;
        case 1:
            canvas.width = height;
            canvas.height = width;
            ctx.rotate(degree);
            ctx.drawImage(img, 0, -height);
            break;
        case 2:
            canvas.width = width;
            canvas.height = height;
            ctx.rotate(degree);
            ctx.drawImage(img, -width, -height);
            break;
        case 3:
            canvas.width = height;
            canvas.height = width;
            ctx.rotate(degree);
            ctx.drawImage(img, -width, 0);
            break;
        }
    }
</script>
